<template>
	<view>
		<!-- F1: 搜索一楼 -->
		<view class="f1">
			<uni-icons @click="goBack" class="back" type="back" size="25" color="#ffc05f" />
			<uni-search-bar 
				class="search"
				radius="100"
				cancelButton="none"
				placeholder="等你回家 - 薛之谦"
				bgColor="#f5f5f5"
			/>
			<text>搜索</text>
		</view>
		
		<!-- F2: 热门搜索 -->
		<view class="f2">
			<uni-card 
			title="热搜榜" 
			sub-title="靓仔"
			:isShadow="false"
			>
				<view v-for="(c, i) in data" :key="i" class="f2-bom">
					<text>{{i+1}}</text>
					<text class="f2-bom-two">{{c.first}}</text>
				</view>
				
			</uni-card>
			
			<uni-card
			title="话题榜" 
			sub-title="吃瓜群众"
			:isShadow="false"
			>
				<view v-for="(c, i) in hot" :key="i" class="f2-bom">
					<text>{{i+1}}</text>
					<text class="f2-bom-two">{{c.searchWord}}</text>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
import { hotDetail, searchHot } from '@/service'
	export default {
		data() {
			return {
				data:[],
				hot:[],
			}
		},
		methods: {
			goBack(){
				uni.navigateBack()
			}
		},
		async onLoad() {
			let data = await searchHot()
			// console.log(data)
			this.data = [...data, ...data]
			
			let hot = await hotDetail()
			this.hot = hot
			console.log(hot)
		}
	}
</script>

<style lang="scss">
.f1{
	padding: $uni-spacing-col-base $uni-spacing-row-base;
	flex-direction: row;
	align-items: center;
	.back{
		flex-shrink: 0;
	}
	.search{
		flex-grow: 1;
	}
}
.f2{
	padding: $uni-spacing-col-base $uni-spacing-row-base;
	flex-direction: row;
	.uni-card{
		margin: $uni-spacing-row-sm !important;
		text{
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.f2-bom{
		flex-direction: row;
		margin-top: $uni-spacing-col-sm;
		.f2-bom-two{
			padding-left: $uni-spacing-row-base+8px !important;
		}
	}
}
</style>
